<template>
  <div>
    <div class="symbol-selector">
      <div
          v-for="(symbol, index) in relationalOperatorSymbolsWithSelection"
          :key="index"
          :class="['symbol-item w-30 text-center cursor-pointer m-4 p-4', { 'symbol-item-active': activeSymbol.label === symbol.label }]"
          @click="selectRelationalOperatorSymbols(symbol)"
      >
        {{ symbol.label }}
      </div>
    </div>
  </div>
</template>

<script>
import { relational_operator, symbols } from '../symbols'

export default {
  name: 'index',
  data() {
    return {
      relationalOperatorSymbolsWithSelection: relational_operator.map(symbol => ({
        ...symbol
      })),
      activeSymbol: ''
    }
  },
  methods: {
    selectRelationalOperatorSymbols(symbol) {
      this.activeSymbol = symbol
      this.$emit('click', symbol)
    }
  }
}
</script>

<style lang="scss" scoped>
.w-30 {
  width: 40px;
}
.text-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}
.m-4 {
  margin: 4px;
}
.p-4 {
  padding: 4px;
}
.symbol-selector {
  //width: 240px;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  //justify-content: start;
  //align-items: start;
  overflow-y: auto;
  -ms-overflow-y: auto ;
}

.symbol-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  &-active {
    background-color: #fcbd01;
  }
}

.selected-symbol {
  display: inline-block;
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 500px;
  height: 40px;
}
</style>
